<template>
    <div id="redEnvelope">
        <div class="headerBar">
            <div class="icon" @click="goBack">
                <i class="iconfont">&#xe72d;</i>
            </div>
            限时抢红包
        </div>
        <div class="placeholder" :class="{active:!notice}"></div>
        <div class="notice" v-if="notice">
            温馨提示:您当前可抢次数为{{times}}/{{allTimes}}， <router-link to="/userFriend" >立即邀请</router-link> 增加可抢次数
            <i class="icon iconfont"  @click="close">&#xe60e;</i>
        </div>
        <div class="main-container">
            <div class="today" :class="{noData:todayList.length==0}">
                <h3>
                    今日红包
                </h3>
                <div class="content" v-if="todayList.length">
                    <div class="list " v-for="(item,index) in todayList" :key="index" @click="toRush(item)" :class="{end:item.end==2}">
                        <div class="status"  v-if="item.end==0">限抢中</div>
                        <div class="status" v-else-if="item.end==1">即将开始</div>
                        <div class="status" v-else>已抢完</div>
                        <div class="time" v-if="item.end==0">
                            <timer :startTime=parseInt(item.start_time) :endTime=parseInt(item.end_time) @isend=changeEnd(item)></timer>  
                        </div>
                        <div class="time" v-else-if="item.end==1">
                             {{item.start_time | filtertime}}-{{item.end_time | filtertime}}
                        </div>
                        <div class="time" v-else>
                            <p>
                                <span>00</span>：
                                <span>00</span>：
                                <span>00</span>
                            </p>
                        </div>
                        <p>红包剩余</p>
                        <div class="received" v-if="item.end==2">已领取：{{item.total_num}}/{{item.total_num}}</div>
                        <div class="received" v-else>已领取：{{item.received_num }}/{{item.total_num}}</div>

                        <div class="total" v-if="item.end==2">共{{item.total_money }}/{{item.total_money}}元</div>
                        <div class="total" v-else>共{{item.received_money | moneyFilter}}/{{item.total_money}}元</div>
                    </div>
                </div>
                 <!-- 没有数据 -->
                 <noData v-else :title="'红包活动暂未开放'"></noData>
            </div>
            <div class="future" :class="{noData:futureList.length==0}">
                 <h3>红包预告</h3>
                 <div class="content" v-if="futureList.length">
                    <div class="list" v-for="(item,index) in futureList" :key="index"  @click="toRush(item)">
                        <div class="status">{{item.start_time| filtertimestamp}}</div>
                        <div class="time">
                            {{item.start_time | filtertime}}-{{item.end_time | filtertime}}
                        </div>
                        <p>红包剩余</p>
                        <div class="received">已领取：{{item.received_num}}/{{item.total_num}}</div>
                        <div class="total">共{{item.received_money}}/{{item.total_money}}元</div>
                    </div>
                 </div>
                 <!-- 没有数据 -->
                 <noData v-else :title="'红包活动暂未开放'"></noData>
            </div>
        </div>
        <!-- 初始化页面加载动画 -->
        <div class="loading-wrap" v-show="showloading">
            <loading></loading>
        </div>
        <!-- 红包领取框 -->
        <van-popup v-model="show" class="redBox" v-if="receive.cur_player">
            <div class="container">
                <i class="icon iconfont" @click="closeModel">&#xe60e;</i>
                <h3>恭喜您获得</h3>
                <div class="time">{{receive.cur_player.create_time|filtertimes}}</div>
                <div class="money">{{receive.cur_player.money|moneyFilter}}<span>元</span></div>
                <div class="validity">有效期：{{receive.cur_player.effect_start_time|filtertimestamp}}至{{receive.cur_player.effect_end_time|filtertimestamp}}</div>
                <router-link to="/userMoney" tag="div" class="btn" @click.native="hide">
                    立即使用
                </router-link>
                <div class="other">
                    <h3>看看大家的手气</h3>
                    <div class="list" v-for="(item,index) in receive.recent_three_player" :key="index">
                        <div class="list-l">
                            <div class="username">{{item.username}}</div>
                            <div class="time">{{item.create_time | filtertimes}}</div>
                        </div>
                        <div class="list-r">
                            <div class="voucher">{{item.money|moneyFilter}}元代币券</div>
                        </div>
                    </div>
                </div>
            </div>
        </van-popup>
        <router-view></router-view>
    </div>
</template>

<script>
    import {envelopeList,receivEnvelope} from 'api/game_box'
    import {formatDate} from 'js/date'
    import timer from './timer'
    import Loading from "common/loading"
    import noData from "common/noData"
    import { mapState,mapMutations} from 'vuex'
    import { Toast } from 'vant';
    export default {
        name:'redEnvelope',
        data(){
            return{
                notice:true,
                todayList:[],
                futureList:[],
                showloading:true,
                show:false,
                receive:[],
                times:"",
                allTimes:""
            }
        },
        created(){
            envelopeList().then(res=>{
                if (res.data.error == 0) {
                   this.todayList=res.data.content.today_paper;
                   this.futureList=res.data.content.future_paper;
                   this.times=res.data.content.red_paper_number;
                   this.allTimes=res.data.content.red_paper_total_number;
                   this.showloading=false;
                }else{
                   this.showloading=false;
                }
            })
        },
         filters:{
             filtertimestamp(time){
                let date = new Date(time*1000);
                return formatDate(date, 'yyyy-MM-dd');
            },
             filtertimes(time){
                let date = new Date(time*1000);
                return formatDate(date, 'yyyy-MM-dd hh:mm');
            },
            filtertime(time){
                let date = new Date(time*1000);
                return formatDate(date, 'hh:mm');
            },
            moneyFilter(money){
                if(money==0){
                    return money
                }else{
                    return  parseFloat(money).toFixed(2);
                }
            }
        },
        methods:{
            close(){
                this.notice=false;
            },
            hide(){
                this.show=false;
            },
            toRush(item){
                receivEnvelope(item.id).then(res=>{
                        if (res.data.error == 0) {
                        this.times--;
                        // item.received_num++;
                        // item.received_money+=res.data.content.cur_player.money;
                        this.show=true;
                        this.receive=res.data.content;              
                    }else if(res.data.error==103){
                        sessionStorage.setItem("redEnvelope", JSON.stringify(res.data.content));
                         this.$router.push({
                            path: '/redDetail',
                        })
                    }
                })
            },
            closeModel(){
                this.show=false;
            },
            changeEnd(item){
                item.end=2;
            },
            goBack(){
                if (window.history.length <= 1) {
                    this.$router.push({path:'/'})
                } else {
                    this.$router.go(-1)
                }
            },
             ...mapMutations(['SET_USERINFO','SET_LOGININFO'])
        },
        components:{
            timer,
            Loading,
            noData
        },
        destroyed(){
            Toast.clear();
        }
    }
</script>

<style scoped lang="scss">
@import "~styles/variable.scss";
@import "~styles/mixins.scss";
#redEnvelope{
     .headerBar{
        position:fixed;
        z-index:999;
        top:0;
        left: 50%;
        transform:translateX(-50%);
        width: 7.5rem;
        height:0.8rem;
        line-height:0.8rem;
        text-align:center;
        color:#fff;
        background:$color-focus;
        font-size:$font-size-l;
        .icon{
            position:absolute;
            top:0;
            left:0.2rem;
            .iconfont{
                padding:0 0.1rem;
                font-size:0.4rem;
            }
        }
     }
     .notice{
         position:fixed;
         z-index:999;
         top:0.8rem;
         left:50%;
         transform:translateX(-50%);
         width: 7.5rem;
         height:0.8rem;
         line-height:0.8rem;
         padding:0 0.36rem;
         background:#3e3d3f;
         color:#fff;
         @include ellipsis();
         a{
             color:#ffd321;
         }
         .icon{
             position:absolute;
             top:0;
             right:0.1rem;
             font-size:0.4rem;
         }
     }
     .main-container{
         background:#f5f5f5;
         h3{
             line-height:.4rem;
             font-size:$font-size-l;
             font-weight:bold;
             display:flex;
             justify-content: space-between;
             span{
                 font-size:.24rem;
                 color:#fc644d;
             }
         }
         .list{
             display:inline-block;
             margin-right:0.28rem;
             width:3.2rem;
             height:2.6rem;
             background-size:100% 100%;
             overflow:hidden;
             text-align: center;
             @include bg-image('../../assets/image/pic_hongbaos');
             font-size: .2rem;
             &:nth-child(even){
                 margin-right:0;
             }
             &.end{
                 position:relative;
                 border-radius:14px;
                 &:after{
                    content:'.';
                    position:absolute;
                    top:0;
                    left:0;
                    width:100%;
                    height:100%; 
                    background-color:#e7ce8b;
                    opacity:0.5;
                 }
             }
             .status{
                 margin-top:0.05rem;
                 font-size:$font-size-m;
                 color:#fff5a0;
             }
             .time{
                 margin-top:0.1rem;
                 margin-bottom:0.5rem;
                 color:#fff;
                 font-size:$font-size-m;
                 p{
                    overflow:hidden;
                    height:0.4rem;
                    span{
                        display:inline-block;
                        width:0.4rem;
                        height:0.36rem;
                        line-height:0.36rem;
                        text-align: center;
                        background:#ddbc84;
                        border-radius:3px;
                        color:#fc644d;
                    }
                }
             }
             p{
                 line-height:.4rem;
                 color:#fff;
             }
             .received,.total{
                 color:#fee692;
                 line-height:.3rem;
             }
             
         }
         .today,.future{
             background:#fff;
             padding:0.2rem 0.36rem;
             position:relative;
             .content{
                 .list{
                     margin-top:0.3rem;
                 }
             }
             &.noData{
                 min-height:3rem;
             }
         }
         .future{
             margin-top:0.3rem;
             .status{
                 font-size:0.24rem;
             }
             .time{
                //  color:#ffd756;
                color:#fff;
                 font-size:$font-size-l;
                 margin-bottom:.6rem;
             }
         }
     }
}
.placeholder{
    width:100%;
    height:1.6rem;
    transition: 0.1s;
    &.active{
        height:0.8rem;
    }
}
.redBox{
    width:5.46rem;
    height:9.16rem;
    background-size:100% 100%;
    background-color:transparent;
    @include bg-image('../../assets/image/pic_hongbaok');
    .container{
        padding-top:2.7rem;
        text-align: center;
        position:relative;
        .icon{
            position: absolute;
            font-size: 0.5rem;
            top: 0.7rem;
            right: 0.1rem;
            color: #a44026;
        }
        h3{
            font-size: $font-size-l;
            color:#fff4a2;
        }
        .time{
            color:#f6ce48;
            line-height:0.4rem;
        }
        .money{
            margin-top:0.05rem;
            color:#fff;
            font-size:0.6rem;
            span{
                margin-left:0.1rem;
                font-size:$font-size-l;
            }
        }
        .validity{
            margin:0.2rem 0;
            color:#f6ce48;
        }
        .btn{
            margin:0.3rem auto 0 auto;
            width:3.6rem;
            height:0.56rem;
            line-height:0.56rem;
            background:#f9ad26;
            color:#fff;
            font-size:$font-size-m;
            border-radius:0.28rem;
            box-shadow: 0 5px 10px rgba(0,0,0,0.2);
        }
        .other{
            margin-top:0.3rem;
            padding:0 0.45rem;
            h3{
                font-size:$font-size-m;
                margin-bottom:0.1rem;
            }
            .list{
                display:flex;
                justify-content: space-between;
                padding-bottom:0.1rem;
                color:#f6ce48;
                line-height:0.36rem;
                border-bottom:1px solid #ff7366;
                .time{
                    line-height:0.36rem;
                }
                .list-l{
                    text-align: left;
                }
                .list-r{
                    display:flex;
                    align-items: flex-end;
                }
                &:last-child{
                    border:0;
                }
            }
        }
    }
}
</style>